Ember.js এর অ্যাডভান্সড Component Design

Ember.js একটি শক্তিশালী ফ্রেমওয়ার্ক যা উন্নত Component-Based Architecture এর মাধ্যমে বড় ও স্কেলেবল অ্যাপ্লিকেশন তৈরিতে সাহায্য করে। কম্পোনেন্টের ডিজাইন, ব্যবহারের এবং পুনঃব্যবহারের ক্ষমতা Ember.js-কে অন্য ফ্রেমওয়ার্কের থেকে আলাদা করে তোলে। কম্পোনেন্ট ডিজাইন করার সময় কিছু উন্নত কৌশল ও পদ্ধতি অনুসরণ করা হয় যা অ্যাপ্লিকেশনের পারফরম্যান্স ও কোড মেইনটেনেবিলিটি উন্নত করতে সহায়ক।

এই টিউটোরিয়ালে আমরা Ember.js এর অ্যাডভান্সড কম্পোনেন্ট ডিজাইন নিয়ে আলোচনা করব, যা উন্নত কম্পোনেন্ট ব্যবহার, কাস্টম ইন্টারঅ্যাকশন, মডুলার কোড এবং আরও অনেক কিছু নিয়ে কাজ করবে।

১. Ember.js কম্পোনেন্টস এর সংজ্ঞা এবং কাঠামো

Ember.js কম্পোনেন্টস হল পুনঃব্যবহারযোগ্য UI উপাদান যা ডেটা, লজিক এবং ভিউ উপস্থাপনাকে একত্রিত করে। একটি কম্পোনেন্ট সাধারণত দুটি প্রধান অংশে বিভক্ত:

• JavaScript (এটি কম্পোনেন্টের লজিক বা কার্যাবলী পরিচালনা করে)
• Template (এই অংশটি HTML এর মতো, যা UI তৈরি করে এবং ডেটার সাথে ইন্টারঅ্যাকশন করে)

একটি কম্পোনেন্ট সাধারণত app/components/ ফোল্ডারে থাকে এবং তার টেমপ্লেট app/templates/components/ ফোল্ডারে থাকে।

উদাহরণ:

ember generate component custom-button

এটি দুটি ফাইল তৈরি করবে:

1. app/components/custom-button.js (কম্পোনেন্টের জাভাস্ক্রিপ্ট লজিক)
2. app/templates/components/custom-button.hbs (কম্পোনেন্টের টেমপ্লেট)

২. Advanced Component Design Principles

Ember.js কম্পোনেন্ট ডিজাইন করার সময়, কিছু গুরুত্বপূর্ণ principles বা ধারণা মেনে চলা উচিত। এটি আপনার অ্যাপ্লিকেশনের পারফরম্যান্স, স্থিতিশীলতা, এবং কোড পুনঃব্যবহারযোগ্যতা বাড়িয়ে তুলবে।

১. Reusability (পুনঃব্যবহারযোগ্যতা)

একটি কম্পোনেন্ট যখন একাধিক জায়গায় ব্যবহৃত হয়, তখন reusability একটি গুরুত্বপূর্ণ দিক। একটি কম্পোনেন্টকে যতটা সম্ভব স্টেটলেস এবং টেমপ্লেট-ভিত্তিক রাখা উচিত, যাতে সেটি সহজেই বিভিন্ন পরিবেশে ব্যবহৃত হতে পারে।

উদাহরণ:

<!-- app/templates/components/custom-button.hbs -->
<button {{on "click" this.handleClick}} class={{this.className}}>
  {{yield}} <!-- Yield used for passing content -->
</button>

// app/components/custom-button.js
import Component from '@glimmer/component';

export default class CustomButtonComponent extends Component {
  handleClick() {
    alert('Button clicked!');
  }
}

এখানে, কম্পোনেন্টটি yield ব্যবহার করে আউটপুট কাস্টমাইজ করা যায় এবং className প্রপার্টি অ্যাপ্লিকেশনের বিভিন্ন শৈলী অনুযায়ী পরিবর্তিত হতে পারে।

২. Separation of Concerns (কর্তব্যের আলাদা করা)

Separation of Concerns হল একটি গুরুত্বপূর্ণ নকশা প্যাটার্ন, যা কম্পোনেন্টের লজিক এবং ভিউকে আলাদা করে রাখে। অ্যাপ্লিকেশনের UI এবং লজিকের মধ্যে পরিষ্কার বিভাজন রাখা উচিত।

• UI লেয়ার: টেমপ্লেটের মাধ্যমে রেন্ডার করা হয়
• লজিক লেয়ার: কম্পোনেন্টের জাভাস্ক্রিপ্ট ফাইলে কন্ট্রোল করা হয়

উদাহরণ:

<!-- app/templates/components/modal-dialog.hbs -->
<div class="modal">
  <h2>{{this.title}}</h2>
  <p>{{this.content}}</p>
  <button {{on "click" this.closeModal}}>Close</button>
</div>

// app/components/modal-dialog.js
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class ModalDialogComponent extends Component {
  @action
  closeModal() {
    this.args.onClose();
  }
}

এখানে, কম্পোনেন্টের UI টেমপ্লেট থেকে আলাদা রাখা হয়েছে এবং লজিকের জন্য JavaScript ফাইল ব্যবহৃত হয়েছে।

৩. State Management (স্টেট ম্যানেজমেন্ট)

Ember.js-এ, কম্পোনেন্টের state management অত্যন্ত গুরুত্বপূর্ণ। আপনি কম্পোনেন্টের স্টেটকে tracked properties বা @tracked ডেকোরেটরের মাধ্যমে ট্র্যাক করতে পারেন, যা UI পরিবর্তনের সঙ্গে সিঙ্ক্রোনাইজ হয়।

উদাহরণ:

// app/components/toggle-switch.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class ToggleSwitchComponent extends Component {
  @tracked isActive = false;

  toggle() {
    this.isActive = !this.isActive;
  }
}

<!-- app/templates/components/toggle-switch.hbs -->
<button {{on "click" this.toggle}}>
  {{if this.isActive "Active" "Inactive"}}
</button>

এখানে, @tracked ব্যবহৃত হয়েছে isActive প্রপার্টির পরিবর্তন ট্র্যাক করার জন্য, এবং UI স্বয়ংক্রিয়ভাবে আপডেট হবে যখন এই প্রপার্টির মান পরিবর্তিত হবে।

৪. Contextual Actions (কনটেক্সচুয়াল অ্যাকশনস)

Ember.js কম্পোনেন্টে actions ব্যবহৃত হয় ইউজার ইন্টারঅ্যাকশন হ্যান্ডল করার জন্য। একাধিক কম্পোনেন্টের মধ্যে অ্যাকশন পাঠাতে contextual actions ব্যবহার করা হয়, যেখানে অভ্যন্তরীণ কম্পোনেন্টের অ্যাকশন আউটপুট রিলে করা হয়।

উদাহরণ:

// app/components/item-list.js
import Component from '@glimmer/component';

export default class ItemListComponent extends Component {
  handleItemClick(item) {
    this.args.onItemClick(item); // Action passed from parent component
  }
}

<!-- app/templates/components/item-list.hbs -->
<ul>
  {{#each this.items as |item|}}
    <li {{on "click" (fn this.handleItemClick item)}}>{{item.name}}</li>
  {{/each}}
</ul>

এখানে, handleItemClick অ্যাকশনটি প্যারেন্ট কম্পোনেন্টের কাছে onItemClick অ্যাকশন পাঠায়, যা প্যারেন্ট কম্পোনেন্টের action handler ট্রিগার করবে।

৩. Advanced Component Patterns

১. Dynamic Components

এম্বারজেএস-এ, Dynamic Components ব্যবহার করে আপনি runtime-এ কোন কম্পোনেন্ট রেন্ডার করতে পারেন। এর জন্য {{component}} helper ব্যবহৃত হয়।

উদাহরণ:

{{!-- app/templates/application.hbs --}}
{{component this.selectedComponent}}

// app/controllers/application.js
import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  selectedComponent = 'alert-box';  // Dynamically changing component
}

এখানে, selectedComponent কম্পোনেন্টের মান পরিবর্তন করা হলে তা UI-তে স্বয়ংক্রিয়ভাবে রেন্ডার হবে।

২. Rendering a Template into Another Component

কম্পোনেন্টের মধ্যে অন্য কম্পোনেন্টের টেমপ্লেট রেন্ডার করার জন্য {{yield}} ব্যবহার করা হয়।

উদাহরণ:

{{!-- app/templates/components/card.hbs --}}
<div class="card">
  <h2>{{yield}}</h2>  <!-- Yield used for passing content -->
</div>

এখানে, {{yield}} ব্যবহার করে আপনি প্যারেন্ট কম্পোনেন্ট থেকে ডায়নামিক কনটেন্ট পাঠাতে পারেন।

<!-- app/templates/application.hbs -->
{{#card}}
  This is a dynamic card content!
{{/card}}

Ember.js-এর অ্যাডভান্সড কম্পোনেন্ট ডিজাইন প্যাটার্নগুলি আপনার অ্যাপ্লিকেশনকে আরও মডুলার, স্কেলেবল, এবং পুনঃব্যবহারযোগ্য করতে সাহায্য করে। Component-based Architecture অনুসরণ করে, আপনি UI এবং লজিক আলাদা রাখতে পারেন, স্টেট ম্যানেজমেন্ট সহজ করতে পারেন, এবং কাস্টম ইন্টারঅ্যাকশন তৈরি করতে পারেন। কম্পোনেন্ট ডিজাইন করার সময়, reusability, separation of concerns, এবং dynamic components এর মত গুরুত্বপূর্ণ প্যাটার্নগুলি ব্যবহৃত হয়, যা Ember.js-কে আরও শক্তিশালী এবং পারফরম্যান্স-বান্ধব করে তোলে।

Ember.js-এ Component Communication এবং Data Flow অত্যন্ত গুরুত্বপূর্ণ বিষয়, কারণ একটি অ্যাপ্লিকেশনে বিভিন্ন কম্পোনেন্টের মধ্যে তথ্য এবং কার্যকলাপের যোগাযোগ স্বচ্ছ এবং কার্যকরীভাবে পরিচালনা করতে হয়। Ember.js-এ কম্পোনেন্টের মধ্যে ডেটা প্রেরণ এবং কম্পোনেন্টের মধ্যে ইন্টারঅ্যাকশন কিভাবে পরিচালিত হবে, তা ডেভেলপারদের জন্য খুবই গুরুত্বপূর্ণ।

এখানে Component Communication এবং Data Flow সংক্রান্ত কিছু মূল ধারণা এবং তাদের কার্যপদ্ধতি তুলে ধরা হচ্ছে।

Ember.js-এ Component Communication এবং Data Flow

Ember.js-এ কম্পোনেন্ট কমিউনিকেশন বা ডেটা প্রবাহ পরিচালনার জন্য কিছু পদ্ধতি রয়েছে, যেমন:

1. Parent-to-Child Communication: প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাঠানো।
2. Child-to-Parent Communication: চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ডেটা পাঠানো।
3. Sibling Communication: সিবলিং কম্পোনেন্টের মধ্যে ডেটা শেয়ার করা।

১. Parent-to-Child Communication (প্যারেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাঠানো)

Ember.js-এ, প্যারেন্ট কম্পোনেন্টের প্রপার্টি চাইল্ড কম্পোনেন্টে পাঠানো হয় attributes বা args হিসেবে। প্যারেন্ট কম্পোনেন্ট চাইল্ড কম্পোনেন্টে ডেটা পাঠাতে পারে, এবং চাইল্ড কম্পোনেন্ট সেই ডেটা ব্যবহার করে কাজ করতে পারে।

উদাহরণ: Parent-to-Child Communication

// app/components/parent-component.js
import Component from '@glimmer/component';

export default class ParentComponent extends Component {
  parentMessage = 'Hello from Parent!';
}

<!-- app/templates/components/parent-component.hbs -->
<ChildComponent @message={{this.parentMessage}} />

এখানে, parentMessage প্যারেন্ট কম্পোনেন্টের একটি প্রপার্টি, যা চাইল্ড কম্পোনেন্টে @message আর্গুমেন্ট হিসেবে পাঠানো হয়েছে।

// app/components/child-component.js
import Component from '@glimmer/component';

export default class ChildComponent extends Component {
  // child-component এ ডেটা গ্রহণ
}

<!-- app/templates/components/child-component.hbs -->
<p>{{@message}}</p>

এখানে, @message চাইল্ড কম্পোনেন্টে প্যারেন্ট কম্পোনেন্ট থেকে প্রাপ্ত ডেটা হিসেবে ব্যবহৃত হচ্ছে।

২. Child-to-Parent Communication (চাইল্ড থেকে প্যারেন্ট কম্পোনেন্টে ডেটা পাঠানো)

এমবারজেএসে, চাইল্ড কম্পোনেন্ট প্যারেন্ট কম্পোনেন্টে ডেটা পাঠাতে actions বা events ব্যবহার করে। চাইল্ড কম্পোনেন্টে একটি action বা event ট্রিগার করা হয়, এবং প্যারেন্ট কম্পোনেন্টে সেই অ্যাকশন হ্যান্ডল করা হয়।

উদাহরণ: Child-to-Parent Communication

// app/components/child-component.js
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class ChildComponent extends Component {
  @action
  sendMessage() {
    this.args.onMessage('Hello from Child!');
  }
}

এখানে, sendMessage অ্যাকশনটি প্যারেন্ট কম্পোনেন্টের কাছে একটি মেসেজ পাঠানোর জন্য ব্যবহৃত হচ্ছে।

<!-- app/templates/components/child-component.hbs -->
<button {{on "click" this.sendMessage}}>Send Message to Parent</button>

প্যারেন্ট কম্পোনেন্টে এই অ্যাকশনটি গ্রহণ করা হয়:

// app/components/parent-component.js
import Component from '@glimmer/component';

export default class ParentComponent extends Component {
  parentMessage = '';

  handleMessage(message) {
    this.parentMessage = message;
  }
}

<!-- app/templates/components/parent-component.hbs -->
<ChildComponent @onMessage={{this.handleMessage}} />
<p>{{this.parentMessage}}</p>

এখানে, @onMessage প্যারেন্ট কম্পোনেন্টে একটি handleMessage অ্যাকশন ইনজেক্ট করে, যা চাইল্ড কম্পোনেন্ট থেকে ডেটা গ্রহণ করে।

৩. Sibling Communication (সিবলিং কম্পোনেন্টে ডেটা শেয়ার করা)

Ember.js-এ, সিবলিং কম্পোনেন্টগুলোর মধ্যে সরাসরি ডেটা শেয়ার করার জন্য সাধারণত একটি shared parent component ব্যবহৃত হয়, যা দুইটি সিবলিং কম্পোনেন্টের ডেটা পরিচালনা করে।

উদাহরণ: Sibling Communication

// app/components/parent-component.js
import Component from '@glimmer/component';

export default class ParentComponent extends Component {
  siblingMessage = '';
  
  updateSiblingMessage(message) {
    this.siblingMessage = message;
  }
}

<!-- app/templates/components/parent-component.hbs -->
<SiblingOne @updateMessage={{this.updateSiblingMessage}} />
<SiblingTwo @message={{this.siblingMessage}} />

এখানে, SiblingOne এবং SiblingTwo কম্পোনেন্ট দুটি সিবলিং। SiblingOne প্যারেন্ট কম্পোনেন্টে একটি অ্যাকশন প্রেরণ করবে এবং SiblingTwo সেই ডেটা প্রাপ্ত করবে।

// app/components/sibling-one.js
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class SiblingOneComponent extends Component {
  @action
  sendMessageToSibling() {
    this.args.updateMessage('Message from Sibling One');
  }
}

<!-- app/templates/components/sibling-one.hbs -->
<button {{on "click" this.sendMessageToSibling}}>Send Message</button>

// app/components/sibling-two.js
import Component from '@glimmer/component';

export default class SiblingTwoComponent extends Component {}

<!-- app/templates/components/sibling-two.hbs -->
<p>Received Message: {{@message}}</p>

এখানে, SiblingOne কম্পোনেন্টের মাধ্যমে SiblingTwo কম্পোনেন্টে ডেটা শেয়ার করা হচ্ছে, যা প্যারেন্ট কম্পোনেন্টের মাধ্যমে পরিচালিত হচ্ছে।

Ember.js-এ Data Flow

Ember.js-এ Data Flow হল অ্যাপ্লিকেশনের মধ্যে ডেটার গতিবিধি এবং কিভাবে ডেটা এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে প্রেরিত হয়। এটি সাধারণত তিনটি রকমের: unidirectional, bidirectional, এবং tri-directional।

১. Unidirectional Data Flow:

এটি Ember.js-এর মূল নীতি। ডেটা সাধারণত এক দিক থেকে আরেক দিকে প্রবাহিত হয়: Parent → Child।

২. Bidirectional Data Flow:

এটি সাধারণত two-way data binding ব্যবহার করে, যেখানে Child → Parent এবং Parent → Child উভয়ের মধ্যে ডেটা প্রবাহিত হয়।

৩. Tri-directional Data Flow:

এটি বেশিরভাগ ক্ষেত্রেই ব্যবহার করা হয় যখন তিনটি কম্পোনেন্ট বা স্তরের মধ্যে ডেটার আদান-প্রদান হয়, যা Siblings এর মধ্যে প্রেরিত হতে পারে।

Ember.js-এ Component Communication এবং Data Flow অত্যন্ত গুরুত্বপূর্ণ, কারণ এগুলোর মাধ্যমে কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার এবং অ্যাকশন পরিচালনা করা যায়। Parent-to-Child, Child-to-Parent, এবং Sibling Communication পদ্ধতি ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের মধ্যে কার্যকরী যোগাযোগ এবং ডেটা প্রবাহ তৈরি করতে পারেন। Ember.js এর unidirectional data flow ডেটার প্রবাহকে আরও সোজা এবং সহজ করে তোলে, যা অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট এবং ডেটার সিঙ্ক্রোনাইজেশনকে উন্নত করে।

Ember.js একটি শক্তিশালী ফ্রেমওয়ার্ক যা পুনঃব্যবহারযোগ্য components তৈরি করতে সহায়ক। কম্পোনেন্টের মাধ্যমে UI উপাদানগুলিকে encapsulate এবং ম্যানেজ করা যায়। Yield এবং Block Syntax Ember কম্পোনেন্টগুলির জন্য একটি অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য, যা কম্পোনেন্টের মধ্যে dynamic content ইনজেক্ট করার জন্য ব্যবহৃত হয়। এটি কম্পোনেন্টে বাইরের কন্টেন্ট বা উপাদান সন্নিবেশ করাতে সাহায্য করে।

Yield কী?

Yield হল একটি Handlebars helper যা আপনাকে একটি কম্পোনেন্টের মধ্যে বাইরের কন্টেন্ট বা ব্লক পাস করতে দেয়। এটি মূলত Block Syntax এর একটি অংশ, যা কম্পোনেন্টের মধ্যে কাস্টম কন্টেন্ট অন্তর্ভুক্ত করার জন্য ব্যবহৃত হয়।

এটি ব্যবহার করার মাধ্যমে আপনি কম্পোনেন্টের মধ্যে ব্লক পাস করে সেই ব্লকের কন্টেন্টকে কম্পোনেন্টে রেন্ডার করতে পারেন।

Ember Components এবং Yield ব্যবহার

১. কম্পোনেন্টে Yield ব্যবহার করা

যখন আপনি একটি component তৈরি করেন, তখন আপনি yield কিওয়ার্ডটি ব্যবহার করে টেমপ্লেটে বাইরের কন্টেন্টকে কম্পোনেন্টের মধ্যে পাস করতে পারবেন।

Example: Simple Yield in Component

1. কম্পোনেন্ট তৈরি করা

প্রথমে একটি কম্পোনেন্ট তৈরি করি:

ember generate component modal

এটি app/components/modal.js এবং app/templates/components/modal.hbs ফাইল তৈরি করবে।

2. Modal কম্পোনেন্টের JavaScript ফাইল

// app/components/modal.js
import Component from '@glimmer/component';

export default class ModalComponent extends Component {
  // আপনি এখানে অন্যান্য লজিকও রাখতে পারেন
}

3. Modal কম্পোনেন্টের Template (Handlebars)

<!-- app/templates/components/modal.hbs -->
<div class="modal">
  <div class="modal-content">
    {{yield}}  <!-- এখানে বাইরের কন্টেন্ট পাস করা হবে -->
  </div>
</div>

এখানে {{yield}} ব্যবহার করা হয়েছে, যা মূল কম্পোনেন্টে বাইরের কন্টেন্ট ইনজেক্ট করবে।

২. কম্পোনেন্টে Yield ব্যবহার করে কন্টেন্ট পাস করা

এখন, আমরা modal কম্পোনেন্টটি parent template-এ ব্যবহার করে কাস্টম কন্টেন্ট পাস করতে পারি:

<!-- app/templates/application.hbs -->
<Modal>
  <h1>Modal Title</h1>
  <p>This is some content inside the modal!</p>
</Modal>

এখানে, ট্যাগের মধ্যে থাকা কন্টেন্টটি modal কম্পোনেন্টে yield হয়ে যাবে এবং modal.hbs টেমপ্লেটের মধ্যে রেন্ডার হবে।

Block Syntax

Block Syntax কম্পোনেন্টের ভিতরে ডাইনামিক কন্টেন্ট পাস করার একটি বিশেষ উপায়। এটি আপনাকে কম্পোনেন্টে একটি block পাস করার অনুমতি দেয়, যা একটি রেন্ডারিং কন্টেক্সট তৈরির জন্য ব্যবহৃত হয়।

Block Syntax ব্যবহার করার উদাহরণ

1. Block-Style কম্পোনেন্ট তৈরি করা

// app/components/button.js
import Component from '@glimmer/component';

export default class ButtonComponent extends Component {}

2. Button কম্পোনেন্টের Template (Handlebars)

<!-- app/templates/components/button.hbs -->
<button class="btn">
  {{yield}} <!-- Here, the content passed to the component will be rendered -->
</button>

3. Parent Template (block content passed to the Button component)

<!-- app/templates/application.hbs -->
<Button>
  Click Me!
</Button>

এখানে, Click Me! কন্টেন্টটি Button কম্পোনেন্টে yield হবে এবং button.hbs টেমপ্লেটে রেন্ডার হবে।

উল্লেখযোগ্য বিষয়:

• {{yield}} একটি placeholder হিসেবে কাজ করে যেখানে আপনি কম্পোনেন্টে পাস করা কন্টেন্ট রেন্ডার করতে পারেন।
• Block Syntax তে, আপনি পুরো ব্লক কন্টেন্ট পাস করতে পারেন, যেমন পাঠ্য, ইমেজ বা অন্য কম্পোনেন্ট।

Yield এবং Block Syntax এর সুবিধা

1. কাস্টম কন্টেন্ট পাস করা সহজ: আপনি কম্পোনেন্টের মধ্যে বাইরের কন্টেন্ট (যেমন টেক্সট বা অন্যান্য কম্পোনেন্ট) পাস করে ডাইনামিকভাবে কন্টেন্ট রেন্ডার করতে পারেন।
2. Reusable Components: Yield এবং Block Syntax ব্যবহারের মাধ্যমে কম্পোনেন্টগুলো আরও পুনঃব্যবহারযোগ্য হয়, কারণ আপনি কন্টেন্ট বা UI উপাদানগুলিকে ব্লকের মাধ্যমে পাস করতে পারেন।
3. সাধারণ এবং পরিষ্কার কোড: এটি আপনাকে আরো পরিষ্কার, সংক্ষিপ্ত এবং সংগঠিত কোড লেখার সুবিধা দেয়, যা কম্পোনেন্টের পুনঃব্যবহার এবং রক্ষণাবেক্ষণ সহজ করে।

Ember.js-এ Yield এবং Block Syntax কম্পোনেন্টের মধ্যে বাইরের কন্টেন্ট বা UI উপাদান পাস করার একটি শক্তিশালী পদ্ধতি। Yield কিওয়ার্ডটি ব্যবহার করে আপনি কম্পোনেন্টের মধ্যে বাইরের কন্টেন্ট ইনজেক্ট করতে পারেন, আর Block Syntax ব্যবহারের মাধ্যমে আপনি আরও ডাইনামিক কন্টেন্ট রেন্ডার করতে পারেন। এই বৈশিষ্ট্যগুলো আপনাকে আরও মডুলার, পুনঃব্যবহারযোগ্য এবং পরিষ্কার কোড তৈরি করতে সাহায্য করবে।

Contextual Components হল Ember.js এর একটি শক্তিশালী বৈশিষ্ট্য, যা আপনাকে একটি কম্পোনেন্টের মধ্যে অন্য কম্পোনেন্টগুলো কনটেক্সচুয়ালি (contextually) রেন্ডার করার সুযোগ দেয়। এটি "block-level components" নামে পরিচিত এবং আপনি এটি যখন কোনও কম্পোনেন্টের মধ্যে টেমপ্লেটের ব্লক হিসেবে ব্যবহার করতে চান।

Contextual Components আপনাকে একটি কম্পোনেন্টের ভেতরে আরও এক বা একাধিক কম্পোনেন্ট রেন্ডার করতে দেয়, তবে এই কম্পোনেন্টগুলোর আচরণ এবং কনটেন্ট অভ্যন্তরীণ কম্পোনেন্টের উপর নির্ভরশীল থাকে।

Contextual Components কী?

Ember.js-এ Contextual Components এক ধরনের কম্পোনেন্ট যা block syntax ব্যবহার করে, অর্থাৎ আপনি block content পাস করতে পারেন এবং সেই কনটেন্টের মাধ্যমে কম্পোনেন্টের ভেতরের টেমপ্লেট বা আচরণ কাস্টমাইজ করতে পারেন। এটি {{yield}} টেমপ্লেট হেল্পারের মাধ্যমে কাজ করে।

এই ধরনের কম্পোনেন্টে, আপনি dynamic block content পাস করতে পারবেন এবং সেই কনটেক্সটে কম্পোনেন্টের আচরণ পরিবর্তন করতে পারবেন।

Contextual Components ব্যবহারের উদাহরণ

১. Contextual Component তৈরি করা

ধরা যাক, আমাদের একটি button কম্পোনেন্ট আছে যা dynamic content গ্রহণ করবে এবং যেটি অন্য কম্পোনেন্টের ভেতরে ব্লক হিসেবে ব্যবহার করা হবে।

1. Button কম্পোনেন্ট তৈরি করা:

ember generate component button

এটি app/components/button.js এবং app/templates/components/button.hbs ফাইল তৈরি করবে।

2. Button কম্পোনেন্টের JavaScript ফাইল:

// app/components/button.js
import Component from '@glimmer/component';

export default class ButtonComponent extends Component {
  // এখানে যেকোনো অতিরিক্ত লজিক হতে পারে
}

3. Button কম্পোনেন্টের Handlebars টেমপ্লেট:

<!-- app/templates/components/button.hbs -->
<button>
  {{yield}}  <!-- Yielding the block content -->
</button>

এখানে, {{yield}} ব্যবহার করা হয়েছে, যার মাধ্যমে আপনি button কম্পোনেন্টের ভিতরে যে কনটেন্ট পাস করবেন, তা রেন্ডার হবে।

২. Contextual Component ব্যবহার করা

এখন, এই button কম্পোনেন্টটিকে অন্য একটি টেমপ্লেটে ব্যবহার করা যাক এবং টেমপ্লেটের ব্লক হিসেবে কনটেন্ট পাস করি:

<!-- app/templates/application.hbs -->
<Button>
  Click Me!
</Button>

এখানে, <Button> কম্পোনেন্টে Click Me! টেক্সট ব্লক হিসেবে পাস করা হয়েছে। যখন এটি রেন্ডার হবে, তখন {{yield}} কম্পোনেন্টের ভিতরে Click Me! প্রদর্শিত হবে।

৩. Contextual Component এর ব্যবহার আরও জটিল করা

এখন, ধরা যাক, আপনি একটি card কম্পোনেন্ট তৈরি করতে চান যা ব্যবহারকারীর তথ্য শো করবে এবং আপনি সেই তথ্য কাস্টমাইজ করতে চান।

1. Card কম্পোনেন্ট তৈরি করা:

ember generate component card

2. Card কম্পোনেন্টের JavaScript ফাইল:

// app/components/card.js
import Component from '@glimmer/component';

export default class CardComponent extends Component {
  // এখানে যেকোনো অতিরিক্ত লজিক হতে পারে
}

3. Card কম্পোনেন্টের Handlebars টেমপ্লেট:

<!-- app/templates/components/card.hbs -->
<div class="card">
  <h3>{{@title}}</h3>
  <div class="card-content">
    {{yield}}  <!-- Yielding the block content inside the card -->
  </div>
</div>

এখানে, {{@title}} পাস করা হয়েছে, যা প্রপস হিসেবে card কম্পোনেন্টে পাঠানো হবে। আর {{yield}} কম্পোনেন্টের ভিতরে কাস্টম কনটেন্ট রেন্ডার করবে।

4. Card কম্পোনেন্ট ব্যবহার করা:

<!-- app/templates/application.hbs -->
<Card @title="User Profile">
  <p>This is the user's profile description.</p>
</Card>

এখানে, <Card> কম্পোনেন্টের মধ্যে @title প্রপস পাঠানো হয়েছে, যা "User Profile" হবে, এবং ব্লক হিসেবে "This is the user's profile description." পাঠানো হয়েছে, যা {{yield}} এর মাধ্যমে card-content এর মধ্যে রেন্ডার হবে।

Contextual Components এর আরও ব্যবহার

১. Dynamic Blocks with Multiple Yields

এটি খুবই কার্যকরী হতে পারে যখন আপনি একাধিক ব্লক রেন্ডার করতে চান। আপনি একাধিক {{yield}} ব্যবহার করে একাধিক ব্লক রেন্ডার করতে পারেন।

<!-- app/templates/components/modal.hbs -->
<div class="modal">
  <div class="modal-header">
    {{yield header}}  <!-- Yielding the header block -->
  </div>
  <div class="modal-body">
    {{yield body}}  <!-- Yielding the body block -->
  </div>
</div>

এখন, এই কম্পোনেন্টে দুটি ব্লক পাস করা যাবে:

<!-- app/templates/application.hbs -->
<Modal>
  <:header>
    <h1>Modal Header</h1>
  </:header>
  <:body>
    <p>This is the body content of the modal.</p>
  </:body>
</Modal>

এখানে, :header এবং :body ব্লক কনটেন্ট পাস করা হয়েছে এবং তারা {{yield header}} এবং {{yield body}} এর মাধ্যমে রেন্ডার হবে।

Contextual Components এর সুবিধা

1. Reusable Components: Contextual components আপনাকে একটি কম্পোনেন্ট তৈরি করতে দেয় যা বিভিন্ন কনটেক্সটের জন্য কাস্টমাইজ করা যায়। আপনি এক কম্পোনেন্টের ভিতরে বিভিন্ন কনটেন্ট পাস করতে পারেন, যার ফলে কোড পুনঃব্যবহারযোগ্যতা বৃদ্ধি পায়।
2. Flexibility and Customization: আপনি সহজেই ব্লক কনটেন্টের মাধ্যমে কম্পোনেন্টের আচরণ কাস্টমাইজ করতে পারেন, যা UI এর অধিক নমনীয়তা প্রদান করে।
3. Improved Readability: Ember.js এর Contextual Components ফিচার আপনার কোডের পাঠযোগ্যতা এবং ডেভেলপমেন্টের দক্ষতা বাড়ায়, কারণ এতে কোডের পুনঃব্যবহারযোগ্যতা এবং কনট্রোল বৃদ্ধি পায়।

Contextual Components হল Ember.js এর একটি শক্তিশালী বৈশিষ্ট্য, যা কম্পোনেন্টের মধ্যে কাস্টম ব্লক কনটেন্ট পাস করতে এবং সেই কনটেন্টের উপর ভিত্তি করে কম্পোনেন্টের আচরণ পরিবর্তন করতে সহায়ক। এটি আপনার অ্যাপ্লিকেশনকে আরও নমনীয়, পুনঃব্যবহারযোগ্য এবং কাস্টমাইজযোগ্য করে তোলে। Ember.js-এর block-level components বা contextual components ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনটিকে আরও দক্ষ ও উন্নত করতে পারেন।

Ember.js একটি শক্তিশালী ফ্রেমওয়ার্ক যা components এর মাধ্যমে UI নির্মাণের জন্য একটি মডুলার এবং পুনঃব্যবহারযোগ্য পদ্ধতি সরবরাহ করে। কম্পোনেন্টগুলি UI উপাদানগুলির মতো কাজ করে, যেখানে আপনি একাধিক জায়গায় ব্যবহার করার জন্য একই কম্পোনেন্ট রেন্ডার করতে পারেন। এর মাধ্যমে অ্যাপ্লিকেশনের কাঠামো আরও পরিষ্কার এবং মডুলার হয়।

এমবারজেএস-এ Reusable (পুনঃব্যবহারযোগ্য) এবং Dynamic (ডাইনামিক) কম্পোনেন্ট তৈরি করার পদ্ধতি এখানে আলোচনা করা হয়েছে।

১. Reusable Component তৈরি করা

Reusable Component এমন একটি কম্পোনেন্ট যা একাধিক জায়গায় বা প্রোজেক্টে ব্যবহার করা যেতে পারে। কম্পোনেন্টকে Dynamic এবং Customizable করতে, আপনি arguments বা properties পাস করতে পারেন, যা কম্পোনেন্টটির behavior কাস্টমাইজ করবে।

Reusable Component Example

এখানে একটি পুনঃব্যবহারযোগ্য কম্পোনেন্ট তৈরি করা হবে যা একটি বাটন রেন্ডার করবে এবং তার ক্লিক ইভেন্ট হ্যান্ডল করবে:

1. Component তৈরি করা:

ember generate component button

এটি app/components/button.js এবং app/templates/components/button.hbs ফাইল তৈরি করবে।

2. button.js (Component Logic)

// app/components/button.js
import Component from '@glimmer/component';

export default class ButtonComponent extends Component {
  // আপনি যেকোনো ডেটা বা লজিক এখানে পরিচালনা করতে পারেন
  get buttonText() {
    return this.args.text || 'Click Me'; // আর্গুমেন্ট 'text' যদি না পায় তবে ডিফল্ট 'Click Me'
  }

  handleClick() {
    alert('Button clicked!');
  }
}

3. button.hbs (Component Template)

<!-- app/templates/components/button.hbs -->
<button {{on "click" this.handleClick}}>{{this.buttonText}}</button>

এখানে buttonText একটি কম্পোনেন্ট প্রপার্টি হিসেবে ব্যবহৃত হচ্ছে, যা args.text থেকে আর্গুমেন্ট হিসেবে আসবে। handleClick() মেথড বাটন ক্লিক হলে একটি অ্যালার্ট দেখাবে।

4. App Template এ কম্পোনেন্ট ব্যবহার:

<!-- app/templates/application.hbs -->
<Button @text="Save" />
<Button @text="Delete" />
<Button />

এখানে, @text="Save" এবং @text="Delete" ব্যবহার করে কম্পোনেন্টকে কাস্টমাইজ করা হয়েছে। তৃতীয় বাটনটি কোন text আর্গুমেন্ট না দেওয়া হলে ডিফল্ট Click Me টেক্সট দেখাবে।

২. Dynamic Component তৈরি করা

Dynamic Components হল এমন কম্পোনেন্ট যা তার উপাদান বা কনটেন্ট runtime এ পরিবর্তিত হয়। Ember.js এর dynamic component ব্যবহারে, আপনি একটি কম্পোনেন্টের মান প্রোগ্রাম্যাটিকভাবে পরিবর্তন করতে পারবেন এবং একই কম্পোনেন্ট বিভিন্ন পরিস্থিতিতে বিভিন্নভাবে রেন্ডার করতে পারবেন।

Dynamic Component Example

এখানে একটি ডাইনামিক কম্পোনেন্ট তৈরি করা হবে যা কম্পোনেন্টের নাম এবং আর্গুমেন্টের ওপর ভিত্তি করে বিভিন্ন কম্পোনেন্ট রেন্ডার করবে।

1. Component তৈরি করা:

ember generate component dynamic-component

এটি app/components/dynamic-component.js এবং app/templates/components/dynamic-component.hbs ফাইল তৈরি করবে।

2. dynamic-component.js (Component Logic)

// app/components/dynamic-component.js
import Component from '@glimmer/component';

export default class DynamicComponent extends Component {
  get componentName() {
    // আর্গুমেন্টের মাধ্যমে নির্ধারণ করা হবে কোন কম্পোনেন্ট রেন্ডার হবে
    return this.args.componentName || 'default-component';
  }
}

এখানে, componentName কম্পোনেন্টটি args.componentName থেকে আর্গুমেন্ট নিয়ে একটি ডাইনামিক কম্পোনেন্ট রেন্ডার করবে। যদি আর্গুমেন্ট না থাকে, তবে ডিফল্টভাবে default-component রেন্ডার হবে।

3. dynamic-component.hbs (Component Template)

<!-- app/templates/components/dynamic-component.hbs -->
{{#if (eq this.componentName 'first-component')}}
  <FirstComponent />
{{else if (eq this.componentName 'second-component')}}
  <SecondComponent />
{{else}}
  <DefaultComponent />
{{/if}}

এখানে, dynamic-component কম্পোনেন্টের আর্গুমেন্টের উপর ভিত্তি করে বিভিন্ন কম্পোনেন্ট রেন্ডার হচ্ছে। eq হেল্পারটি ব্যবহার করে আমরা ডাইনামিকভাবে একটি কম্পোনেন্ট নির্বাচন করছি।

4. App Template এ Dynamic Component ব্যবহার:

<!-- app/templates/application.hbs -->
<DynamicComponent @componentName="first-component" />
<DynamicComponent @componentName="second-component" />
<DynamicComponent @componentName="unknown-component" />

এখানে, আমরা DynamicComponent কম্পোনেন্টে আর্গুমেন্ট হিসেবে @componentName পাস করছি, যার মাধ্যমে প্রতিটি রেন্ডার হবে আলাদা কম্পোনেন্ট।

৩. Dynamic Slot/Content Passing

Ember.js-এ আপনি একটি কম্পোনেন্টের মধ্যে dynamic content পাঠাতে পারেন। এই বৈশিষ্ট্যটি ব্যবহার করে একটি কম্পোনেন্টের টেমপ্লেটের মধ্যে ডাইনামিক কনটেন্ট রেন্ডার করা যায়।

Example: Dynamic Slot Content Passing

1. DynamicSlotComponent তৈরি করা

ember generate component dynamic-slot

2. dynamic-slot.js (Component Logic)

// app/components/dynamic-slot.js
import Component from '@glimmer/component';

export default class DynamicSlotComponent extends Component {}

3. dynamic-slot.hbs (Component Template)

<!-- app/templates/components/dynamic-slot.hbs -->
<div class="dynamic-slot">
  {{yield}} <!-- Yield allows dynamic content to be passed inside -->
</div>

4. Application Template:

<!-- app/templates/application.hbs -->
<DynamicSlot>
  <h2>This is dynamic content inside the slot</h2>
</DynamicSlot>

এখানে, yield ব্যবহার করে আমরা dynamic-slot কম্পোনেন্টের ভিতরে ডাইনামিক কনটেন্ট পাস করেছি।

৪. Reusable এবং Dynamic Component এর উপকারিতা

• Reusable Components: একবার তৈরি করা কম্পোনেন্ট একাধিক জায়গায় পুনঃব্যবহার করা যায়। এতে কোডের পুনঃব্যবহারযোগ্যতা বাড়ে এবং অ্যাপ্লিকেশন দ্রুত ডেভেলপ করা যায়।
• Dynamic Components: ডাইনামিক কম্পোনেন্টের মাধ্যমে, আপনি কম্পোনেন্টের আউটপুট বা behavior runtime এ পরিবর্তন করতে পারেন। এটি UI এর আরও বেশি ইন্টারঅ্যাকটিভ এবং ডাইনামিক পারফর্মেন্স সরবরাহ করে।

Ember.js-এ Reusable এবং Dynamic কম্পোনেন্ট তৈরি করা আপনাকে পুনঃব্যবহারযোগ্য UI উপাদান তৈরি করতে সহায়ক। Reusable Components আপনার কোডের মডুলারিটি বাড়ায় এবং Dynamic Components আপনাকে ডাইনামিকভাবে UI তৈরি করতে সাহায্য করে। এটি অ্যাপ্লিকেশনটির লজিক এবং UI উন্নত করে এবং কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি পায়।